<template>
  <div class="success-page">
    <container-box :metaTitle="routeMeta.title || ''">
      <div class="container" slot="container">
        <div class="state-logo">
          <mds-icon type="check-circle" />
          <p>提交成功</p>
        </div>
        <p>
          提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。本文字区
          <br />域可以展示简单的补充说明，如果有类似展示“会议信息”的需求，下面这个灰色区域可以呈现比较复杂的内容。
        </p>
        <div class="meeting_info">
          <div class="title">会议信息：</div>
          <ul>
            <li>
              <span>会议名称：</span>头脑风暴会议室
            </li>
            <li>
              <span>会议室：</span>A1-05-青青河边草
            </li>
            <li>
              <span>会议时间：</span>2020-02-02 16:00:00
            </li>
            <li>
              <span>支持人：</span>经纬（jingwei）
            </li>
          </ul>
        </div>
        <div class="submit-btns">
          <mds-button type="primary">主要按钮</mds-button>
          <mds-button>次要按钮</mds-button>
          <mds-button>次要按钮</mds-button>
        </div>
      </div>
      <mds-card slot="info" class="mds-card" style="width: 280px" :loading="true">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
        <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'

export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  }
}
</script>

<style lang="scss">
.success-page {
  .mdsicon-check-circle {
    font-size: 72px;
    color: #00ba00;
  }
}
</style>
<style lang="scss" scoped>
.success-page {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    .state-logo {
      text-align: center;
      p {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(53, 64, 82, 1);
        line-height: 32px;
        margin-top: 24px;
      }
    }
    > p {
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(127, 143, 164, 1);
      line-height: 22px;
      margin-top: 16px;
    }
    .meeting_info {
      width: 560px;
      // height: 228px;
      padding: 24px 40px;
      background: rgba(250, 250, 253, 1);
      border-radius: 2px;
      margin: 40px auto;
      .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(53, 64, 82, 1);
        line-height: 24px;
      }
      ul {
        li {
          margin-top: 16px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(53, 64, 82, 1);
          line-height: 22px;
          span {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(127, 143, 164, 1);
            line-height: 22px;
            display: inline-block;
            width: 86px;
          }
        }
      }
    }
    .submit-btns {
      text-align: center;
      button {
        margin-right: 8px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
